<!--回收站-->
<template>
  <div class="flex-main recyle app-container">
    <div style="padding: 0 10px;background: #fff; margin-bottom: 10px;">
      <div class="flex-row" style="align-items: center;height: 50px;">
        <div v-if="fileAllPath.length>0 ">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for="(item,index) in fileAllPath" :key="item.index">
              <el-link v-if="index != fileAllPath.length-1" :underline="false">
                {{ item.catalogName }}
              </el-link>
              <el-link v-if="index == fileAllPath.length-1" :underline="false">
                {{ item.catalogName }}
              </el-link>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>
    <div class="table-container flex-main">
      <div class="table-container-header">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form :model="listQuery" :inline="true">
              <el-form-item>
                <el-input v-model="listQuery.keyword" placeholder="请输入关键字" style="width:235px" @keyup.enter.native="handleFilter" />
              </el-form-item>
              <el-form-item>
                <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                  <i class="el-icon-refresh-right refresh-icon" @click="handleRefresh" />
                </el-tooltip>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12" style="height: 32px;line-height: 32px;" class="tr">
            <button-option skin="danger" icon="el-icon-delete" title="全部清除" @click="moveToRecycleBin(currentSelectedData)">全部清除</button-option>
          </el-col>
        </el-row>
      </div>

      <el-table
        ref="multipleTable"
        :data="fileList"
        header-cell-class-name="table-header"
        fit
        height="100%"
        highlight-current-row
        @row-click="handleRowClick"
        @sort-change="sortChange">
        <el-table-column label="名称" prop="originalFileName" sortable min-width="260" show-overflow-tooltip row-class-name="file-icon">
          <template slot-scope="scope">
            <file-viewer :type="scope.row.fileType" :url="scope.row.fileUuid" :title="scope.row.originalFileName" />
            {{ scope.row.originalFileName }}.{{ scope.row.fileExt }}
          </template>
        </el-table-column>

        <el-table-column label="类型" prop="fileExt" width="100" align="center">
          <template slot-scope="scope">
            <span style="margin-right:5px">{{ scope.row.fileExt }}</span>文件
          </template>
        </el-table-column>
        <el-table-column label="大小" prop="fileSize" sortable align="center" width="140">
          <template slot-scope="scope">
            {{ scope.row.fileSize | formatFileSize }}
          </template>
        </el-table-column>
        <el-table-column label="来源" prop="fileComeSource" width="100" align="center" show-overflow-tooltip />
        <el-table-column label="最后修改" prop="gmtModified" align="center" width="140">
          <template slot-scope="scope">
            {{ scope.row.gmtModified | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="上传时间" prop="gmtCreated" align="center" width="140">
          <template slot-scope="scope">
            {{ scope.row.gmtCreated | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="上传者" prop="realName" align="center" width="100">
          <template slot-scope="scope">
            <span class="color-primary"> {{ scope.row.realName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" align="center" width="150">
          <template slot-scope="scope">
            <button-option skin="primary" title="恢复" @click="handleReduction(scope.row)">恢复</button-option>
            <button-option skin="danger" title="清除" @click="moveToRecycleBin(scope.row)">清除</button-option>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_handler">
      <div class="fl" style="height:50px;line-height:50px;padding-left:20px">
        {{ fileList.length }}个项目,共<span class="color-primary">{{ totalFileSize | formatFileSize }}</span>
      </div>
      <pagination v-show="pageTotal>0" :total="pageTotal" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
export default {
  components: { },
  props: {
    catalogId: {
      type: String,
      default: ''
    },
    node: {
      type: Object,
      default() {
        return {}
      }
    },
    filePath: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      activeFileNameProperty: 'a',
      currentUploadFile: '',
      fileList: [],
      totalFileSize: 0,
      pageTotal: 0,
      listQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        keyword: undefined,
        sort: this.common.SORT_DEFAULT
      },
      fileAllPath: [],
      currentSelectedData: {},
      initNextFolders: [],
      catalogDetails: {
        recordShow: false,
        title: ''
      },

      // 类型0：文件夹，1：文件
      fileType: ''
    }
  },
  computed: {

  },
  watch: {
    catalogId: function(val) {
      this.fetchData()
    },
    currentUploadFile: function(val) {
      this.fetchData()
    },
    filePath: function(val) {
      this.fileAllPath = val
    },
    node: function(val) {
      this.currentSelectedData = val
      this.currentSelectedData.isFile = false
    }
  },
  created() {
    this.fileAllPath = this.filePath
    this.fetchData()
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    /**
     * 刷新
     */
    handleRefresh() {
      this.listQuery.sort = this.common.SORT_DEFAULT
      this.listQuery.page = 1
      this.listQuery.keyword = ''
      this.fetchData()
    },
    async fetchData() {
      this.listQuery.catalogId = this.catalogId
      const fileResourcesgResponse = await this.$store.dispatch('fileResourcesPage', this.listQuery)
      this.fileList = fileResourcesgResponse.records
      this.totalFileSize = 0
      for (var item of this.fileList) {
        this.totalFileSize += item.fileSize
      }
      this.pageTotal = fileResourcesgResponse.total
    },
    /**
     * 表格列排序
     */
    sortChange(data) {
      const { prop, order } = data
      if (prop) {
        if (order === 'ascending') {
          this.listQuery.sort = '+' + prop
        } else {
          this.listQuery.sort = '-' + prop
        }
      } else {
        this.listQuery.sort = this.common.SORT_DEFAULT
      }
      this.handleFilter()
    },
    handleBreacrumb(item) {
      this.listQuery.catalogId = item.id
      const index = this.getArrIndex(this.fileAllPath, item)
      if (index >= 0) {
        this.fileAllPath = this.fileAllPath.slice(0, index + 1)
      }
      this.handleFilter()
    },
    getArrIndex(arr, obj) {
      let index = null
      const key = Object.keys(obj)[0]
      arr.every(function(value, i) {
        if (value[key] === obj[key]) {
          index = i
          return false
        }
        return true
      })
      return index
    },
    handleRowClick(row) {
      this.currentSelectedData = row
      this.currentSelectedData.isFile = true
    },
    handlerRefresh() {
    },

    // 清空回收站
    moveToRecycleBin(item) {
      this.$confirm('您确定要清空吗,是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('clearRecycleBin', { fileId: item.id, isFile: item.isFile ? 1 : 0, type: 0 }).then(response => {
          this.msgSuccess('操作成功')
          this.handleFilter()
        }).catch(() => {})
      }).catch(() => {})
    },
    handleReduction(row) {
      this.$confirm('您确定要恢复此文件吗,是否继续?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('fileResourcesRecycleBinReduction', row.id).then(response => {
          this.msgSuccess('操作成功')
          this.handleFilter()
        }).catch(() => {})
      }).catch(() => {})
    }

  }
}
</script>

<style lang="scss" >
 #recyle{
  .el-table__header tr th{
    background-color: #fff !important;
  }
  .table-container-header{
    svg{
      margin-right: 5px;
      width: 1.2em;
      height: 1.2em;
    }
  }
  .file-icon{
    svg{
      width: 1.6em;
      height: 1.6em;
    }
  }
  .refresh-icon{
    cursor:pointer;
    font-size: 25px;
    padding: 3px 0px;
    color:#a5b5ce
  }
  .refresh-icon:hover{
    color:#409EFF
  }
  .el-tabs__header{
    margin-bottom: 0px;
  }
  .el-tabs__item{
    padding: 0 5px;
  }
 }
</style>
